<template>
	<view :class="['cu-modal',{'show':popShow}]" @click="handleClose">
		<view class="cu-dialog" @click.stop>
		  <view class="pop-cont" v-if="popData">
			  <view class="flex padding solid-bottom">
				<image class="poster margin-right" :src="popData.img" mode=""></image>
				<view class="text-left">
					<view class="">
						{{popData.name}}
					</view>
					<view class="margin-tb-sm">
						{{popData.french}}
					</view>
					<view class="text-price">
						{{popData.list[dropIdx].price}}
					</view>
				</view>
			  </view>
			  <view class="flex padding justify-between solid-bottom">
				选择规格
				<view class="drop-cont">
					<view class="padding-lr-xl" @click="dropShow=true">
						{{popData.list[dropIdx].spec}}
						（{{popData.list[dropIdx].weight}}）
						-
						{{popData.list[dropIdx].edible}}
					</view>
					<view v-if="dropShow" class="drop-list bg-white shadow">
						<view 
							class="padding-sm" 
							v-for="(item,index) in popData.list"  
							@click="handleDropList(index)"
						>
							{{item.spec}}（{{item.weight}}）- {{item.edible}}
						</view>
					</view>
				</view>
			  </view>
			  <view class="flex padding justify-between">
					选择数量
					<tn-number-box v-model="num" :min="1"></tn-number-box>
			  </view>
			  <view class="flex btn-cont text-center">
				<view class="bg-brown padding">
					取消
				</view>
				<view class="bg-yellow padding" @click="handleAdd">
					确定
				</view>
			  </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"cart-pop",
		data() {
			return {
				dropIdx:0,
				dropShow:false,
				num:1
			};
		},
		computed: {
			popShow() {
				return this.$store.state.cart.popShow 
			},
			popData() {
				return this.$store.state.cart.popData 
			},
		},
		methods: {
			handleClose() {
				this.$store.commit('cart/popShowMut',false)
				this.dropIdx = 0
				this.num = 1
			},
			handleDropList(idx){
				this.dropIdx = idx
				this.dropShow = false
			},
			handleAdd(){
				this.handleClose()
				let {popData,dropIdx,num} = this
				this.$store.commit('cart/cartAddMut',{
					...popData,
					dropIdx,
					num,
					ischeck:true
				})
				
			}
		},
	}
</script>

<style lang="scss">
.pop-cont,.cu-dialog{
	width: 700upx;
	overflow: visible !important;
}
.poster{
	height:200upx;
	width:200upx;
	background-color: #d8d8d8;
}
.btn-cont view{
	width: 50%;
}
.drop-cont{
	position: relative;
	.drop-list{
		position: absolute;
		top:60upx;
		right: 0;
		z-index: 3;
	}
}

</style>